<template>
	<view class="foot">
		<svg xmlns="http://www.w3.org/2000/svg" width="1448" height="58" viewBox="0 0 1448 58" fill="none">
			<path fill-rule="evenodd" clip-rule="evenodd"
				d="M717 0.798916H731L989.529 0.798889C996.955 0.798889 1004.08 3.74888 1009.33 8.9999L1053.21 47.799C1058.46 53.0501 1065.59 56 1073.01 56H1448V58H1072.18C1064.76 58 1057.64 55.0501 1052.38 49.799L1008.5 10.9999C1003.25 5.74888 996.127 2.79889 988.701 2.79889L731 2.79892H717L459.299 2.79889C451.873 2.79889 444.751 5.74888 439.5 10.9999L395.615 49.799C390.364 55.0501 383.242 58 375.816 58H0V56H374.988C382.414 56 389.536 53.0501 394.787 47.799L438.672 8.9999C443.923 3.74888 451.045 0.798889 458.471 0.798889L717 0.798916Z"
				fill="url(#paint0_linear_72_29543)" />
			<defs>
				<linearGradient id="paint0_linear_72_29543" x1="0" y1="29.3995" x2="1448" y2="29.3995" gradientUnits="userSpaceOnUse">
					<stop stop-color="#29292D" />
					<stop offset="0.0727797" stop-color="#F9F9F9" />
					<stop offset="0.9" stop-color="#A0A0A0" />
					<stop offset="1" stop-color="#28282C" />
				</linearGradient>
			</defs>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="91" viewBox="0 0 1920 91" fill="none">
			<path d="M613.5 55.5H0V91H1920V55H1305L1291.5 49.5L1240 4L1226.5 0H689L677.5 6L626.5 51L613.5 55.5Z" fill="#1D1D1F" />
		</svg>
		<view class="line uv-flex-row">
			<template v-for="(item,index) in count" :key="index">
				<svg xmlns="http://www.w3.org/2000/svg" width="35" height="5" viewBox="0 0 35 5" fill="none">
					<path opacity="0.3" d="M6 0H35L29 5H0L6 0Z" fill="#F2CB29" />
				</svg>
			</template>
		</view>
		<view class="mask"></view>
		<view class="content">
			<view class="desc uv-flex-row">
				<view class="complete">
					<text class="text">已探索{{progress.count}}/{{progress.totalCount}}</text>
					<text class="text">{{percentage}}%</text>
				</view>
				<view class="site">
					<template v-for="(item,index) in site" :key="index">
						<text class="bias" v-if="index>0"> / </text>
						<text class="text" :class="[{'active': item.path==''}]" @click="nav(item.path)">{{item.name}}</text>
					</template>
				</view>
				<!-- <view class="history" v-if="history">
					<text class="text">上次学习课程：{{history}}</text>
				</view> -->
			</view>
			<view class="progress">
				<uv-line-progress :percentage="percentage" height="6px" activeColor="#F2CB29" inactive-color="#58587C" :showText="false"></uv-line-progress>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref, onBeforeUnmount, computed } from 'vue';
	const { windowWidth } = uni.$uv.sys();
	const count = ref(20);
	const props = defineProps({
		progress: {
			type: Object,
			default () {
				return {
					count: 0,
					totalCount: 1
				}
			}
		},
		history: {
			type: String,
			default: ''
		},
		site: {
			type: Array,
			default () {
				return []
			}
		}
	})
	const percentage = computed(() => {
		return Math.floor(props.progress?.count / props.progress?.totalCount);
	})
	window.addEventListener('resize', resize);
	onBeforeUnmount(() => {
		document.removeEventListener('resize', resize);
	})
	
	function nav(url) {
		uni.redirectTo({
			url
		})
	}

	function resize() {
		count.value = Math.ceil(windowWidth / 51);
	}
	resize();
</script>
<style>
	.foot .content>>>.uv-line-progress,
	.foot .content>>>.uv-line-progress .uv-line-progress__background,
	.foot .content>>>.uv-line-progress .uv-line-progress__line {
		border-radius: 0;
	}
</style>
<style scoped lang="scss">
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 91px;
		&>svg:nth-child(1),
		&>svg:nth-child(2) {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		&>svg:nth-child(1) {
			top: 0;
			z-index: 9;
		}
		&>svg:nth-child(2) {
			bottom: -1px;
			z-index: 8;
		}
		.line {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9;
			height: 5px;
			&>svg {
				margin-right: 16px;
				flex-shrink: 0;
			}
		}
		.mask {
			position: absolute;
			left: 0;
			bottom: 36px;
			z-index: 7;
			height: 230px;
			width: 100%;
			opacity: 0.6;
			background: linear-gradient(180deg, #262629 0%, #5F5F78 100%);
		}
		.content {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 18px;
			bottom: 36px;
			z-index: 9;
			width: 520px;
			.desc {
				justify-content: space-between;
				padding-bottom: 10px;
				.complete {
					.text {
						margin-right: 10px;
					}
				}
				.text {
					color: #fff;
				}
				.site {
					.bias {
						color: #545477;
					}
					.text {
						cursor: pointer;
						&:hover {
							font-weight: 700;
						}
						&.active {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
</style>